<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>我是div标签</div>

    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
        <li>第六个</li>
        <li>第七个</li>
        <li>第八个</li>
        <li>第九个</li>
    </ul>

    <script>
        var oDiv = document.querySelector('div');
        // 一个独立的标签对象,可以直接进行DOM操作,设定css样式
        oDiv.style.color = `rgb(${parseInt(Math.random()*256)},${parseInt(Math.random()*256)},${parseInt(Math.random()*256)})`;

        var oLi = document.querySelectorAll('ul>li');
        console.log(oLi);

        // 循环遍历数组
        // item是数据,也就是li标签对象
        oLi.forEach(function(item){
            // console.log(item);
            // 循环遍历 操作每一个独立的标签对象
            item.style.color = `rgb(${parseInt(Math.random()*256)},${parseInt(Math.random()*256)},${parseInt(Math.random()*256)})`;
        })
        
    </script>

    <script>
        /*
            DOM操作
                JavaScript 提供的 操作 html文件的方法

                1,  获取标签对象

                    低版本IE不支持的
                        var 变量 = document.querySelector('条件');
                            获取第一个符合条件的标签对象
                            执行结果是一个独立的标签对象
                            可以直接进行DOM操作
                            如果没有符合条件的标签执行结果是 null

                        var 变量 = document.querySelectorAll('条件');
                            获取所有符合条件的标签对象
                            执行结果是一个 伪数组
                            不能直接对伪数组进行操作
                            使用[]语法获取一个独立的标签对象进行DOM操作
                            循环遍历,获取每一个独立的标签对象,进行DOM操作
                            如果没有符合条件的标签执行结果是 空数组 也就是 数组length为0

                        条件可以是所有html,css支持的语法形式

                    所有浏览器都支持

                        var 变量 = document.getElementById('id属性值');
                            执行结果是一个独立标签对象

                        var 变量 = document.getElementsByClassName('class属性值');
                            执行结果是一个伪数组
                            不能forEach

                        var 变量 = document.getElementsByTagName('标签名称');
                            执行结果是一个伪数组
                            不能forEach

                        var 变量 = document.getElementsByName('name属性值');
                            执行结果是一个伪数组
                            可以forEach

                2,  标签对象的内容

                    标签对象.innerHTML
                        支持解析标签

                    标签对象.innerText
                        不支持解析标签

                3,  标签对象的数据

                    标签对象.value

                4,  标签对象的属性

                    标签对象支持的属性
                        标签对象.id
                        标签对象.className
                        标签对象.title

                    标签对象支持的属性 / 标签对象不支持的属性
                        标签对象.setAttribute( 属性 , 属性值 );
                            设定

                        标签对象.getAttribute( 属性 );
                            获取

                        标签对象.removeAttribute( 属性 );
                            删除

                5,  布尔属性操作方式

                    标签对象.布尔属性
                        执行结果是 布尔值

                6,  标签class属性

                    标签对象.classList.add()
                        新增

                    标签对象.classList.remove()
                        删除

                    标签对象.classList.replace()
                        替换

                    标签对象.classList.toggle()
                        切换    

                7,  占位

                    标签对象.offsetWidth 
                    标签对象.offsetHeight
                        内容 + padding + border

                    
                    标签对象.clientWidth 
                    标签对象.clientHeight
                        内容 + padding

                    标签对象.clientTop 
                    标签对象.clientLeft
                        上 左 边框线宽度

                    标签对象.offsetTop 
                    标签对象.offsetLeft
                        和JavaScript定位父级的间距

                        没有父级 父级没有定位属性
                            body,页面

                        标签本身有 固定定位
                            null,视窗窗口

                        父级有定位属性
                            父级标签

                8,  设定css样式
                    标签对象.style.属性 = 属性值
                        font-size    fontSize

                        
        
        
        */
    </script>
</body>
</html>